<template>
    <ul class="contact-container">
        <li>
            <!-- github -->
            <a :href="data.github" target="_blank">
                <div class="icon">
                    <Icon type="github" />
                </div>
                <span>{{ data.githubName }}</span>
            </a>
        </li>
        <li>
            <!-- 邮箱 -->
            <a :href="data.mail">
                <div class="icon">
                    <Icon type="mail" />
                </div>
                <span>{{ data.mailName }}</span>
            </a>
        </li>
        <li>
            <!-- qq -->
            <a :href="`tencent://message/?Menu=yes&uin=${data.qq}&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45`">
                <div class="icon">
                    <Icon type="qq" />
                </div>
                <span>{{ data.qq }}</span>
            </a>
            <div class="pop">
                <img :src="data.qqQrCode" alt="你的网络不太行">
            </div>
        </li>
        <li>
            <!-- 微信 -->
            <a href="https://github.com/HeJaJaZaiYiQi/chatbot">
                <div class="icon">
                    <Icon type="weixin" />
                </div>
                <span>{{ data.weixin }}</span>
            </a>
            <div class="pop">
                <img :src="data.weixinQrCode" alt="你的网络不太行">
            </div>
        </li>
    </ul>
</template>

<script>
import Icon from '@/components/Icon';
import { mapState } from 'vuex';
const classMap = {
    github: 'github',
    mail: 'mail',
    qq: 'qq',
    weixin: 'weixin',
}
export default {
    components: {
        Icon,
    },
    data() {
        return {
            classMap,
        }
    },
    computed: {
        ...mapState("setting", ["data"]),
    }
}
</script>

<style lang="less" scoped>
@import '~@/styles/var.less';

.contact-container {
    color: @gray;
    list-style: none;
    padding: 20px;
    margin: 0;
    @itemHeight: 30px;
    @bder-bg: #fff;
    width: 100%;
    // height: 100%;

    li {
        height: @itemHeight;
        line-height: @itemHeight;
        margin: 14px 0;
        cursor: pointer;
        position: relative;

        &:hover {
            .pop {
                transform: scaleY(1);
            }
        }

        span {
            font-size: 14px;
        }
    }

    a {
        display: flex;
        align-items: center;
    }

    .icon {
        font-size: 26px;
        width: 36px;
    }

    .pop {
        position: absolute;
        bottom: @itemHeight+5px;
        display: block;
        padding: 10px 15px;
        background: @bder-bg;
        border-radius: 15px;
        transform: scaleY(0);
        transform-origin: bottom;
        transition: all .3s;

        &::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 8px;
            height: 8px;
            background: @bder-bg;
            border-style: solid 10px;
            bottom: -4px;
        }

        img {
            object-fit: cover;
            width: 150px;
            height: 150px;
        }
    }
}
</style>